<%@page import="com.fractalist.man.constants.ManConstants"%>
<%@page import="com.fractalist.base.core.constants.SystemConstants"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/includes.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	pageContext.setAttribute("baseweburl",
			SystemConstants.UPLOAD_WEB_URL);
	pageContext.setAttribute("articleTypeMap",
			ManConstants.ARTICLE_TYPE_MAP);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>文章</title>
<link rel="stylesheet" href="${ctx }/css/styles.css" type="text/css" />
<script type="text/javascript" src="${ctx }/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery.form.js"></script>
<jsp:include page="/common/jscalendar.jsp"></jsp:include>
</head>
<body style="overflow-y: scroll;">
	<script>
		var baseweburl = "${baseweburl}";
		function submitUrlImg() {
			$("#imgListUl")
					.prepend(
							$("<li><div style='float: top;'>"
									+ "<a href='javascript:void(0);' onclick='removeImg(this)'>[删除]</a>"
									+ "</div>"
									+ "<div style='float: top;'>"
									+ "图片描述：<textarea style='height: 60px; resize: none; width: 300px;'></textarea>"
									+ "</div>" + "<img src='"
									+ $("#fileUrl").val() + "' /></li>"));
		}

		function uploadImage() {
			var options = {
				url : '${ctx}/manager/uploadImgBase.action',
				type : "POST",
				dataType : "json",
				success : function(result) {
					var code = result.data.code;
					var url = result.data.url;
					if (code == 0) {
						$("#imgListUl")
								.prepend(
										$("<li><div style='float: top;'>"
												+ "<a href='javascript:void(0);' onclick='removeImg(this)'>[删除]</a>"
												+ "</div>"
												+ "<div style='float: top;'>"
												+ "图片描述：<textarea style='height: 60px; resize: none; width: 300px;'></textarea>"
												+ "</div>"
												+ "<img src='" + url + "' /></li>"));
					}
				}
			};
			$("#uploadForm").ajaxSubmit(options);
		}

		function removeImg(ele) {
			var imgPath = $(ele).parent().parent().find("img").attr("src");
			var articleId = $("#articleId").val();
			if (articleId != "") {
				$.post("${ctx}/manager/delArticleImg.action", {
					articleId : articleId,
					imgPath : imgPath
				}, function(data) {
					$(ele).parent().parent().remove();
				})
			} else {
				$(ele).parent().parent().remove();
			}
		}

		function createArticle() {
			var title = $("#title").val();
			var summary = $("#summary").val();
			var columnId = $("#columnId").val();
			if (title == "") {
				alert("请输入文章的标题");
				return;
			}
			if (summary == "") {
				alert("请输入文章的内容");
				return;
			}
			var imgStr = "";
			var imgSummaryStr = "";
			var tmpLen = $("#imgListUl").children().size();
			for ( var i = 0; i < tmpLen; i++) {
				var tmp = $("#imgListUl").children().eq(i);
				var tmpImgPath = tmp.find("img").attr("src");
				var tmpImgSummary = tmp.find("textarea").val();
				imgStr += tmpImgPath;
				imgSummaryStr += tmpImgSummary;
				if (tmpLen > 1 && i < (tmpLen - 1)) {
					imgStr += ",";
					imgSummaryStr += ",";
				}
			}
			var tags = "";
			var tagSelectArr = $("#tags_td").find("select");
			for ( var i = 0; i < tagSelectArr.size(); i++) {
				if (tagSelectArr.eq(i).val() != "") {
					tags += tagSelectArr.eq(i).val() + ",";
				}
			}
			if (tags != "") {
				tags = tags.substring(0, tags.length - 1);
			}
			$.post("${ctx}/manager/createArticle.action", {
				title : title,
				summary : summary,
				columnId : columnId,
				articleId : $("#articleId").val(),
				tags : tags,
				imgStr : imgStr,
				imgSummaryStr : imgSummaryStr
			}, function(data) {
				location.href = "${ctx}/manage/viewArticlePage.action";
			})
		}

		var articleTypeMap = {};
		<c:forEach items="${articleTypeMap}" var="entry">
		articleTypeMap["${entry.key}"] = "${entry.value}";
		</c:forEach>

		var tagsMap = {};
		var tagHtml = "";
		<c:forEach items="${baseTagList}" var="entry">
		tagsMap["${entry.id}"] = "${entry.tagName}";
		tagHtml += '<option value="${entry.id}">${entry.tagName}</option>';
		</c:forEach>

		function addTag() {
			var html = '<select style="width:60px;"><option value="">请选择</option>'
					+ tagHtml + '</select>';
			$(html).appendTo($("#tags_td"));
		}
	</script>
	<div id="wrapper">
		<div id="content_wrap">
			<div class="tabs_content">
				<div class="active_tab" id="tab1"></div>
				<div id="table_wrapper" style="width: 100%; overflow: auto;">
					<form id="uploadForm" method="post" enctype="multipart/form-data">
						<table class="table" cellpadding="0" cellspacing="0">
							<input type="hidden" name="userId" id="userId"
								value="${USERSESSION.id }" />
							<input type="hidden" name="articleId" id="articleId"
								value="${article.id }" />
							<tr>
								<td>文章标题</td>
								<td><input id="title" name="title" style="width: 600px;"
									value="${article.title }" /></td>
							</tr>
							<tr>
								<td>文章标签</td>
								<c:if test="${!empty  article.tags}">
									<c:set value="${ fn:split(article.tags, ',') }" var="tags" />
								</c:if>
								<td id="tags_td"><a href="javascript:void(0);"
									onclick="addTag()"><font color=red>添加标签</font></a> <c:if
										test="${!empty  tags}">
										<c:forEach items="${ tags }" var="tag">
											<select style="width: 60px;">
												<option value="">请选择</option>
												<c:forEach var="t" items="${baseTagList }">
													<option value="${t.id }"
														<c:if test="${t.id == tag }">selected</c:if>>${t.tagName
														}</option>
												</c:forEach>
											</select>
										</c:forEach>
									</c:if></td>
							</tr>
							<tr>
								<td>文章分类</td>
								<td><select id="columnId" name="columnId">
										<c:forEach items="${articleTypeMap}" var="entry">
											<option value="${entry.key }"
												<c:if test="${entry.key == article.columnId }">selected="selected"</c:if>>${entry.value
												}</option>
										</c:forEach>
								</select></td>
							</tr>
							<tr>
								<td>文章内容</td>
								<td><textarea id="summary" name="summary"
										style="height: 196px; resize: none; width: 600px;">${article.summary }</textarea></td>
							</tr>
							<tr>
								<td>上传图片</td>
								<td><input id="fileid" type="file" value="选择上传图片"
									name="fujianFile" onchange="uploadImage()" /><font color="red">*上传图片在选择后会进行上传并最后出现在下方，请耐心等待</font></td>
							</tr>
							<tr>
								<td>输入外部图片有效链接</td>
								<td><input id="fileUrl" name="fileUrl" size=50 /><input
									type="button" value="确定" onclick="submitUrlImg()" /><font
									color="red">*外部图片在点击后会出现在下方，请勿重复点击</font></td>
							</tr>
							<tr>
								<td></td>
								<td><input type="button" value="提交文章"
									onclick="createArticle();" /></td>
							</tr>
							<tr>
								<td colspan="2"><ul id="imgListUl">
										<c:forEach var="img" items="${articleImageList }">
											<li><div style="float: top;">
													<a href='javascript:void(0);' onclick='removeImg(this)'>[删除]</a>
												</div>
												<div style="float: top;">
													图片描述：
													<textarea style="height: 60px; resize: none; width: 300px;">${img.summary }</textarea>
												</div> <c:if
													test="${fn:containsIgnoreCase(img.imageUrl,'http://')}">
													<img src='${img.imageUrl }' />
												</c:if> <c:if
													test="${!fn:containsIgnoreCase(img.imageUrl,'http://')}">
													<img src='${baseweburl }${img.imageUrl }' />
												</c:if></li>
										</c:forEach>
									</ul></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

